<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端UI库</title>
    <link rel="stylesheet" type="text/css" href="http://dev.360tianma.com/lib/templateUI/publicStyle.css" />
    <style type="text/css">
        body{
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
        }
        .title{
            font-size: 23px;
            font-weight: bolder;
            margin-bottom: 50px;
            letter-spacing: 1px;
            text-align: center;
        }
        .box ul li{
            text-align: center;
            margin: 10px;
        }
        a{
            color: #3399FF;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">前端UI公共样式模版1.0</div>
    <div class="tips">
        说明：<br/>
        该UI模版是基于lay-ui框架开发，集合了部分样式的颜色统一，开发者可完全根据lay-ui框架API开发即可（<a href="https://www.layui.com/doc/">lay-ui文档</a>）。<br/>
        模版里的UI样式代码可直接右键鼠标点击查看源码后，复制代码到本地进行测试。模版中只有按钮需加入公共publicStyle的class名，其余可完全按照lay-ui框架开发。
        <br/>
        <br/>
        <br/>
        为了方便大家统一样式使用，提供两种不同方式引入：<br/>
        1.在h5页面只需引入 <br>
           <a href="http://dev.360tianma.com/lib/templateUI/publicStyle.css">http://dev.360tianma.com/lib/templateUI/publicStyle.css</a> css文件<br/>
           <a href="http://dev.360tianma.com/lib/templateUI/layui/layui.all.js">http://dev.360tianma.com/lib/templateUI/layui/layui.all.js</a> js文件<br/>
        即可进行开发。<br/>
        <br/>2.在框架组件开发时，开发人员会提供相对路径位置的代码。（强烈建议使用相对路径代码，避免跨域和加载问题）
        <br/>初步位置在框架开发下的：
        <br/> css文件：public/templateUI/publicStyle.css
        <br/> js文件：public/templateUI/layui/layui.all.js

    </div>
    <ul>
        <li>
            <a href="template/button.html" class="layui-btn publicStyle">常用按钮</a>
        </li>
        <li>
            <a href="template/form.html" class="layui-btn publicStyle">表单数据</a>
        </li>
        <li>
            <a href="template/table.html" class="layui-btn publicStyle">数据表格</a>
        </li>
        <li>
            <a href="template/nav.html" class="layui-btn publicStyle">侧边导航</a>
        </li>
    </ul>
</div>
</body>
</html>